<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <!-- multiple -->
    <el-select v-model="mineStatus" placeholder="请选择" multiple @change="selectChange" ref="select">
		<el-option  :value="mineStatusValue" style="height: auto">
			<el-tree :data="data" node-key="id" ref="tree" highlight-current :props="defaultProps" :check-strictly="true" @check-change="handleCheckChange" @check="setSelectedNode" @node-click="handleNodeClick"></el-tree>
		</el-option>
	</el-select>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
		return {
		  mineStatus: "",
		  mineStatusValue: [],
		  data: [
			{
			  id: 1,
			  label: "一级1",
			  children: [
				{
				  id: 4,
				  label: "二级1-1"
				}
			  ]
			},
			{
			  id: 2,
			  label: "一级2",
			  children: [
				{
				  id: 5,
				  label: "二级2-1"
				},
				{
				  id: 6,
				  label: "二级2-2"
				}
			  ]
			},
			{
			  id: 3,
			  label: "一级3",
			  children: [
				{
				  id: 7,
				  label: "二级3-1"
				},
				{
				  id: 8,
				  label: "二级3-2"
				}
			  ]
			}
		  ],
		  defaultProps: {
			children: "children",
			label: "label"
		  }
		};
	  },
	  methods: {
		//select框值改变时候触发的事件
		selectChange(e){
		  var arrNew = [];
		  var dataLength = this.mineStatusValue.length;
		  var eleng = e.length;
		  for(let i = 0; i< dataLength ;i++){
			for(let j = 0; j < eleng; j++){
			  if(e[j] === this.mineStatusValue[i].label){
				arrNew.push(this.mineStatusValue[i])
			  }
			}
		  }
		  this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
		},
		//树 选中值变更事件
		handleCheckChange() {
		  let res = this.$refs.tree.getCheckedNodes(false, false); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
		  let arrLabel = [];
		  let arr = [];
		  res.forEach(item => {
			arrLabel.push(item.label);
			arr.push(item);
		  });
		  this.mineStatusValue = arr;
		  this.mineStatus = arrLabel;
		  //console.log('arr:'+JSON.stringify(arr))
		  //console.log('arrLabel:'+arrLabel)
		  this.$refs.select.blur();//使 input 失去焦点，并隐藏下拉框
		},
		//点击复选框事件 单选
		setSelectedNode(data, obj) {
			//console.log(JSON.stringify(data));
			//console.log(obj);
			var keys = new Array(); 
			keys.push(data.id);
			this.$refs.tree.setCheckedKeys(keys);
		},
		//点击节点事件 单选
		handleNodeClick(data) {
			//console.log(JSON.stringify(data));
			var checkKeys = this.$refs.tree.getCheckedKeys();
			if(checkKeys.indexOf(data.id)!=-1){
				this.$refs.tree.setChecked(data.id,false);
			}else{			
				var keys = new Array(); 
				keys.push(data.id);
				this.$refs.tree.setCheckedKeys(keys);
			}
		}
	  }
    })
  </script>
</html>